<template>
  <div class="whatlist">
    <div class="whatlist_warp">
      <h4>{{ facebook.title }}</h4>
    </div>

    <ul class="whatlist_item">
      <li
        class="whatlist_item_content tydisplay"
        v-for="(item, i) in facebook.list"
        :key="i"
      >
        <div class="whatlist_item_left">
          <img :src="item.imgurl" alt="" />
        </div>
        <div class="whatlist_item_right">
          <div class="tydisplay">
            <h4>{{ item.name }}</h4>
            <p>
              {{ item.content }}
            </p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "whatlist",
  props: ["facebook"],
};
</script>

<style scoped>
.tydisplay {
  display: flex;
}
.whatlist {
  background: #f7f7f8;
}
.whatlist_warp,
.whatlist_item {
  max-width: 1160px;
  margin: 0 auto;
}
.whatlist_item {
  padding-bottom: 40px;
}
.whatlist_warp > h4 {
  font-size: 38px;
  color: #1d2845;
  padding: 40px 0;
}
.whatlist_item_content {
  justify-content: space-around;
  padding: 10px 155px;
}

.whatlist_item_left > img {
  width: 180px;
}

.whatlist_item_right h4 {
  color: #1d2845;
  font-size: 18px;
}
.whatlist_item_right p {
  color: #6f7b8e;
  font-size: 14px;
  line-height: 21px;
  margin-top: 15px;
}
.whatlist_item_right > div {
  width: 460px;
  height: 185px;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}
</style>